<template>
	<view>
		<uv-navbar :title="title" bg-color="rgba(255,255,255,1)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;">
		</uv-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollHeight + 'px'}">
			<view class="flex-column" style="width: calc(100vw - 32px); margin-left: 16px; ">
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="height: 54px; color: #313C56;">
					任务截图
				</view>
				<uv-upload :fileList="imgList" :maxCount="6" width="80" height="80" @afterRead='choosedImages'
					@delete="deleteImages">
					<view class="flex-row-center"
						style="background-color: white; width: 80px; height: 80px; border: 1px solid #EFF0F4;">
						<image src="../../static/add.png" style="width: 28px;height: 28px;"></image>
					</view>
				</uv-upload>
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="height: 54px; color: #313C56;">
					上传附件
				</view>
				<view class="flex-row flex-items-center font-12 font-weight-regular" style="margin-top: -15px; color: #95A4B3">
					部分钱包暂时不支持文件上传!
				</view>
				<upload-file :fileList="fileList" @choosedFile="choosedFile" @delete="deleteFile"></upload-file>
			</view>
		</scroll-view>
		<view class="flex-row-center font-16 font-weight-regular"
			style="margin-top: 12px; margin-left: 36px; margin-right: 36px; background-color: #EB7520; height: 44px; color: white; border-radius: 22px;"
			@click="commit">
			提交
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
import {
  orderTask,
  progressDetail
} from "../../api";

	import uploadFile from "@/components/upload-file/upload-file.vue"
	export default {
		components: {
			uploadFile
		},
		data() {
			return {
				title: '提交任务',
				projectId: '',
				planId: '',
				status: 0,
				imgList: [],
				fileList: []
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 10
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad(info) {
			this.projectId = parseInt(info.projectId)
			this.planId = parseInt(info.planId)
			this.status = parseInt(info.status)
			this.title = this.status == 0 ? '提交任务' : '修改任务'
			if (this.status == 1) {
				this.getProject()
			}
		},
		methods: {
			commit() {
				let msg = ''
				if (this.imgList.length == 0) {
					msg = '请上传任务截图'
				}

				if (msg.length != 0) {
					this.$refs.toast.show({
						msg: msg
					})
					return
				}

				const imgs = []
				for (let i = 0; i < this.imgList.length; i++) {
					imgs.push(this.imgList[i].url)
				}
				const params = {
					type: this.status,
					projectId: this.projectId,
					planId: this.planId,
					picsUrl: imgs.join(','),
					file: JSON.stringify(this.fileList)
				}
        this.orderTask_(params)
			},
			/**
			 * 获取任务详情
			 */
			getProject() {
				let params = {
					type: 2,
					id: this.projectId,
				}
				progressDetail(params).then((data) => {
					this.processDetailInfo(data)
				}).catch((e) => {})
			},

      /**
			 * 提交数据
			 */
      orderTask_(params) {
        orderTask(params).then((data) => {
          // 网络请求成功后弹框提示并自动返回
          this.$refs.toast.show({
            msg: '提交成功',
            isSuccees: true,
            complete: () => {
              this.getOpenerEventChannel().emit('planEditComplete')
              uni.navigateBack()
            }
          })
				}).catch((e) => {})
			},
			/**
			 * 处理详情数据
			 * @param {Object} data 详情数据
			 */
			processDetailInfo(data) {
				let plans = data.plans
				var plan = null
				for (var i = 0; i < plans.length; i++) {
					if (plans[i].planId == this.planId) {
						plan = plans[i]
						break
					}
				}
				if (plan) {
					let imgList = []
					for (var i = 0; i < plan.pics.length; i++) {
						imgList.push({
							url: plan.pics[i]
						})
					}
					let fileList = []
					for (var i = 0; i < plan.documents.length; i++) {
						let documents = plan.documents[i]
						fileList.push({
							fileUrl: documents.detailUrl,
							fileName: documents.name,
							size: this.$tools.empty(documents.size)
						})
					}
					this.imgList = imgList
					this.fileList = fileList
					console.log(this.fileList)
				}
			},
			/**
			 * 删除图片
			 */
			deleteImages(event) {
				this.imgList.splice(event.index, 1)
			},
			/**
			 * 选择图片
			 */
			async choosedImages(event) {
        uni.showLoading({
          title: '正在上传...',
          mask:true
        })
				const a = await this.upload(event.file.url)
        setTimeout(function() {
          uni.hideLoading()
        }, 50)
				this.imgList.push({
					url: a
				})
			},
			/**
			 *  删除文件
			 */
			deleteFile(e) {
				this.fileList.splice(e.index, 1)
			},
			/**
			 * 选择文件
			 */
			async choosedFile(file) {
				const fileUrl = await this.upload(file.fileUrl)
				file.fileUrl = fileUrl
				this.fileList.push(file)
			},
			/**
			 * 上传文件
			 */
			upload(url) {
				return new Promise((resolve, reject) => {
					uni.$uv.http.upload('api/front/upload', {
						filePath: url,
						name: 'file',
						validateStatus: (statusCode) => {
							return statusCode == 200
						}
					}).then(res => {
						// 返回的res.data 已经进行JSON.parse
						console.log(res)
						resolve(res)
					}).catch(err => {
						console.log(err)
						reject(err)
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>